<template>
	<div class="weui-tabbar">
                          <a class="weui-tabbar__item" v-on:click.stop="go('/board')" >
                                <img v-if="buttons[0].state" v-bind:src="buttons[0].on" alt="" class="weui-tabbar__icon">
                                <img v-else v-bind:src="buttons[0].off" alt="" class="weui-tabbar__icon">
                                <p class="weui-tabbar__label">Ranking list</p></a>   
                          <a class="weui-tabbar__item"  v-on:click.stop="go('/search')" >
                                <img v-if="buttons[1].state" v-bind:src="buttons[1].on" alt="" class="weui-tabbar__icon">
                                <img v-else v-bind:src="buttons[1].off" alt="" class="weui-tabbar__icon"> 
                                <p class="weui-tabbar__label">Search</p></a>
                          <a class="weui-tabbar__item"  v-on:click.stop="go('/comment')" >
                                <img v-if="buttons[2].state" v-bind:src="buttons[2].on" alt="" class="weui-tabbar__icon">
                                <img v-else v-bind:src="buttons[2].off" alt="" class="weui-tabbar__icon"> 
                                <p class="weui-tabbar__label">Comment</p></a>
             </div>
</template>

<script>
  import headerComponent from '../components/Header.vue';
  import containerComponent from '../components/Container.vue';  
  import routes from '../routes'; 

  const baseUrl = "./frontend-plan/vue/dist/img/"; 


  export default {
    props : ['active'], 
    data () { 
    	return { 
    		buttons : [
    		       {
    		       	state : this.active === 0 ? true : false, 
    		       	on : baseUrl + "rl-2.png",
    		       	off : baseUrl + "rl-1.png",
    		       },
    		       {
    		       	state : this.active === 1 ? true : false,
    		       	on : baseUrl + "sc-2.png",
    		       	off : baseUrl + "sc-1.png",
    		       },
    		       {
    		       	state : this.active === 2 ? true : false,
    		       	on : baseUrl + "pf-2.png",
    		       	off : baseUrl + "pf-1.png",
    		       }
    		]
    	}
    },
    methods : {
        go (href) {  
          window.history.pushState(
            null,
            routes[href],
            href
          )
          this.$root.currentRoute = href
        } 
    },
    components: {
      	   headerComponent, 
      	   containerComponent, 
    }
  }
</script> 